import React from 'react';
import {SearchOutlined,RedoOutlined} from '@ant-design/icons';
import {Input,InputNumber,Select,DatePicker, Button} from 'antd';
const {TextArea}=Input
const {Option} = Select
const {RangePicker} = DatePicker
class index extends React.Component {
    constructor(props) {
        super(props);
        let inputResult={}
        props.columns&&props.columns.forEach(item=>{
            inputResult[item.keyName]=item.value||undefined
        })
        this.state = { 
            columns:props.searchItem,
            freshen:false,
            inputResult:inputResult
         };
    }
    componentWillMount(){
        if(this.props.onRef){
        this.props.onRef(this)}
    }
    freshen=()=>{
        this.setState({
            freshen:!this.state.freshen
        })
    }
    handleChange=(keyName,valueType,e)=>{
        let {inputResult} = this.state
        switch(valueType){
            case 'text':
                inputResult[keyName]=e.target.value
                break;
            case 'textArea':
                inputResult[keyName]=e.target.value
                break;
            case 'number':
                inputResult[keyName]=e
                break;
            case 'select':
                inputResult[keyName]=e
                break;
            default:break;
        }
        this.setState({inputResult})
    }
    dateChange=(startName,endName,date,dateStr)=>{
        console.log(startName,endName,date,dateStr)
        let {inputResult} = this.state
        inputResult[startName]=dateStr[0]
        inputResult[endName]=dateStr[1]
        this.setState({inputResult})
    }
    toSearch=()=>{
        this.props.handleSearch(this.state.inputResult)
    }
    toReset=()=>{        
        this.setState({
            inputResult:{}
        })
        this.props.reset()
        this.freshen()
    }
    render() {
        const {columns,inputResult,freshen} = this.state
        return (
            <div>
                {freshen&&columns&&columns.map((item,index)=><span style={{margin:10}} key={index}>
                    {/* 这里是文本输入框 */}
                    {item.valueType==='text'&&<span>
                        <strong>{item.name}：</strong>
                            <Input onChange={this.handleChange.bind(this,item.keyName,item.valueType)} placeholder={'请输入'} style={item.style||{width:250}} value={inputResult[item.name]}/>
                        </span>}
                    {/* 这里是数字输入框 */}
                    {item.valueType==='number'&&<span>
                        <strong>{item.name}：</strong>
                            <InputNumber onChange={this.handleChange.bind(this,item.keyName,item.valueType)} placeholder={'请输入'} style={item.style||{width:250}} value={inputResult[item.name]}/>
                        </span>}
                        {/* 这里是下拉选择去 */}
                    {item.valueType==='select'&&<span>
                   <strong>{item.name}：</strong>
                        <Select onChange={this.handleChange.bind(this,item.keyName,item.valueType)} style={item.style||{width:250}} value={item.value} placeholder={'请选择'} value={inputResult[item.name]}>
                                {item.selectDatas&&item.selectDatas.map(r=>{
                                return<Option value={r.code} key={r.code}>{r.name}</Option>})}
                        </Select>
                        </span>}
                        {/* 这里时间范围选择器 */}
                    {item.valueType==='dateRange'&&<div>
                   <strong>{item.name}：</strong>
                        <RangePicker onChange={this.dateChange.bind(this,item.startName||'startDate',item.endName||'endDate')}  value={''}/>
                        </div>}
                    </span>)}

                    {/* 重置刷新 */}
                    {!freshen&&columns&&columns.map((item,index)=><span style={{margin:10}} key={index}>
                    {/* 这里是文本输入框 */}
                    {item.valueType==='text'&&<span>
                        <strong>{item.name}：</strong>
                            <Input onChange={this.handleChange.bind(this,item.keyName,item.valueType)} placeholder={'请输入'} style={item.style||{width:250}} value={inputResult[item.name]}/>
                        </span>}
                    {/* 这里是数字输入框 */}
                    {item.valueType==='number'&&<span>
                        <strong>{item.name}：</strong>
                            <InputNumber onChange={this.handleChange.bind(this,item.keyName,item.valueType)} placeholder={'请输入'} style={item.style||{width:250}} value={inputResult[item.name]}/>
                        </span>}
                        {/* 这里是下拉选择去 */}
                    {item.valueType==='select'&&<span>
                   <strong>{item.name}：</strong>
                        <Select onChange={this.handleChange.bind(this,item.keyName,item.valueType)} style={item.style||{width:250}} value={item.value} placeholder={'请选择'} value={inputResult[item.name]}>
                                {item.selectDatas&&item.selectDatas.map(r=>{
                                return<Option value={r.code} key={r.code}>{r.name}</Option>})}
                        </Select>
                        </span>}
                        {/* 这里时间范围选择器 */}
                    {item.valueType==='dateRange'&&<div>
                   <strong>{item.name}：</strong>
                        <RangePicker onChange={this.dateChange.bind(this,item.startName||'startDate',item.endName||'endDate')}  value={''}/>
                        </div>}
                    </span>)}
                    <span style={{margin:5}}>
                        <Button type={'primary'} onClick={this.toSearch} icon={<SearchOutlined/>}>搜索</Button>
                    </span>
                    <span style={{margin:5}}>
                        <Button type={'primary'} onClick={this.toReset} icon={<RedoOutlined />}>重置</Button>
                    </span>
                    <span style={{margin:5}}>
                        {this.props.content}
                    </span>

            </div>
        );
    }
}

export default index;